<html data-blockbyte-bs-uid="36596">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=11">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>项目地图</title>
    <link rel="stylesheet" href="./static/bageMap/css/bagemap.css">
    <link rel="stylesheet" href="./static/bageMap/css/MarkerCluster.Default.css">
    <script src="https://olmap.zolbon.com:3000/bigemap.js/v2.1.0/bigemap.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/bm.markercluster-src.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/patternUtils.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/symbol.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/polyline_arrow.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/moveMarker.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/bm.geometryutil.js"></script>
    <script type="text/javascript" src="./static/bageMap/js/togeojson.js"></script>
    <script type="text/javascript" src="./static/js/ezuikit.js"></script>
    <script type="text/javascript" src="./static/js/jquery.js"></script>
    <script type="text/javascript" src="./static/js/manifest.bef584bd1c2d253bd161.js"></script>
    <script type="text/javascript" src="./static/js/vendor.00cc7075c0323908c353.js"></script>

    <!-- <link rel="shortcut icon" href="/favicon.png"> -->
    <link href="./static/css/map.73aca2f0e963a3d95c95012c73b5c4d9.css" rel="stylesheet">



    <script src="./static/js/vue.js"></script>

    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=c057813487caa294fe163311c2ec6bdb&plugin=AMap.PolyEditor">
        </script>




    <style class="blockbyte-bs-style" data-name="content">
        body>div#blockbyte-bs-indicator>div {
            opacity: 0;
            pointer-events: none
        }

        body>iframe#blockbyte-bs-sidebar.blockbyte-bs-visible,
        body>iframe#blockbyte-bs-overlay.blockbyte-bs-visible {
            opacity: 1;
            pointer-events: auto
        }

        body {
            overflow: hidden !important
        }

        body>div#blockbyte-bs-indicator>div {
            position: absolute;
            transform: translate3d(-24px, 0, 0);
            top: 0;
            left: 0;
            width: 24px !important;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0 10px 10px 0;
            transition: opacity 0.3s, transform 0.3s;
            z-index: 2
        }

        body>div#blockbyte-bs-indicator>div>span {
            -webkit-mask: no-repeat center/24px;
            -webkit-mask-image: url(chrome-extension://jdbnofccmhefkmjbkkdkfiicjkgofkdh/img/icon-bookmark.svg);
            background-color: #ffffff;
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        body>div#blockbyte-bs-indicator[data-pos='right'] {
            left: auto;
            right: 0
        }

        body>div#blockbyte-bs-indicator[data-pos='right']>div {
            transform: translate3d(24px, 0, 0);
            left: auto;
            right: 0;
            border-radius: 10px 0 0 10px
        }

        body>div#blockbyte-bs-indicator.blockbyte-bs-fullHeight>div {
            border-radius: 0
        }

        body>div#blockbyte-bs-indicator.blockbyte-bs-hover>div {
            transform: translate3d(0, 0, 0);
            opacity: 1
        }

        body>div#blockbyte-bs-indicator[data-pos='left'].blockbyte-bs-has-lsb {
            height: 100% !important;
            top: 0 !important
        }

        body>div#blockbyte-bs-indicator[data-pos='left'].blockbyte-bs-has-lsb>div {
            background: transparent
        }

        body>div#blockbyte-bs-indicator[data-pos='left'].blockbyte-bs-has-lsb>div>span {
            -webkit-mask-position-y: 20px
        }

        body>iframe#blockbyte-bs-sidebar {
            width: 350px;
            max-width: none;
            height: 0;
            z-index: 2147483646;
            background-color: rgba(255, 255, 255, 0.8) !important;
            speak: none;
            border: none;
            display: block !important;
            transform: translate3d(-350px, 0, 0);
            transition: width 0s 0.3s, height 0s 0.3s, opacity 0.3s, transform 0.3s
        }

        body>iframe#blockbyte-bs-sidebar[data-pos='right'] {
            left: auto;
            right: 0;
            transform: translate3d(350px, 0, 0)
        }

        body>iframe#blockbyte-bs-sidebar.blockbyte-bs-visible {
            width: calc(100% + 350px);
            height: 100%;
            transform: translate3d(0, 0, 0);
            transition: opacity 0.3s, transform 0.3s
        }

        body>iframe#blockbyte-bs-sidebar.blockbyte-bs-hideMask {
            background: none !important
        }

        body>iframe#blockbyte-bs-sidebar.blockbyte-bs-hideMask:not(.blockbyte-bs-hover) {
            width: calc(350px + 50px)
        }

        body>iframe#blockbyte-bs-overlay {
            width: 100%;
            max-width: none;
            height: 100%;
            z-index: 2147483647;
            border: none;
            speak: none;
            background: rgba(0, 0, 0, 0.5) !important;
            transition: opacity 0.3s
        }

        .appBackground {
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .input-card {
            width: 18rem;
            z-index: 170;
        }

        .input-card .btn {
            margin-right: .8rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }

        .voicebox {
            position: relative;
            top: 100%;
            height: 300%;
            width: 100%;

        }

        .send-voice-components {
            position: absolute;
            display: contents;
        }
    </style>
</head>

<body>
    <div id="electronicSandTable" style="position: relative">
        <div class="ivu-spin ivu-spin-large ivu-spin-fix ivu-spin-show-text" style="display: none;">
            <div class="ivu-spin-main"><span class="ivu-spin-dot"></span>
                <div class="ivu-spin-text"><i class="demo-spin-icon-load ivu-icon ivu-icon-ios-loading"
                        style="font-size: 18px;"></i>
                    <div>Loading</div>
                </div>
            </div>
        </div>

        <div id="container" class="container_map" style="
            background: rgb(252, 249, 242);
            position: absolute;
            width: 94.8%;
            top: 16.5%;
            left: 2.6%;
            right: 0;
            bottom: 0;
            height: 79.5%;"></div>


        <div class="appBackground" style="background-image:url(./static/images/map/appBG/map.png);"></div>
        <div class="topMessageBox">
            <Switch disabled="disabled"></Switch>
            <div class="mapTitle">
                <div style="left: 0px;">中恒数字</div>
            </div>
            <div class="commentDate">施工日期</div>
            <div class="nowTime2" style="display: none;"><span id="nowTime2">2020年9月16日 17:24:50</span></div>
            <div class="nowTime" style=""><img src="./static/images/map/appBG/userInfo/clock.png"
                    style="margin-right: 3%; width: 20px;"> <span id="nowTime">2020年9月16日 17:24:50</span></div>
            <div class="tadayNumber" style="padding: 0px 3%;">
                <p class="cudn">
                    在线
                    <span>0</span> 人
                </p>
                <p class="cudn">
                    场内
                    <span>0</span> 人
                </p>
            </div>
            <!---->
            <div class="environmentTitle" style="">场内员工</div>
            <div class="environment">
                <div class="ivu-carousel">
                    <button type="button" class="left ivu-carousel-arrow ivu-carousel-arrow-hover"><i
                            class="ivu-icon ivu-icon-ios-arrow-back"></i>
                    </button>
                    <div class="ivu-carousel-list">
                        <div class="ivu-carousel-track higher"
                            style="width: 0px; transform: translate3d(-17587px, 0px, 0px); transition: transform 500ms ease 0s; visibility: visible;">
                        </div>
                        <div class="ivu-carousel-track"
                            style="width: 0px; transform: translate3d(408px, 0px, 0px); transition: transform 500ms ease 0s; position: absolute;">
                        </div>
                    </div> <button type="button" class="right ivu-carousel-arrow ivu-carousel-arrow-hover"><i
                            class="ivu-icon ivu-icon-ios-arrow-forward"></i></button>
                    <ul class="ivu-carousel-dots ivu-carousel-dots-none"></ul>
                </div>
                <div class="wlarouselHeight" style="padding: 3% 0px; font-size: 18px; text-align: center;">暂无数据</div>
            </div>
            <div class="countDown" style="">
                <p>
                    安全施工
                    <span>74</span> 天
                </p>
                <!---->
                <p class="cudn">
                    倒计时
                    <span>1031</span> 天
                </p>
                <!---->
            </div>
            <div class="noChoseProject projectListBox" style="z-index: 1200;"><span
                    style="font-size: 14px; vertical-align: middle; display: inline-block; width: 50px;">项目：</span>
                <div id="customSelect_map" class="ivu-select ivu-select-single ivu-select-default"
                    style="width: 120px;">
                    <div class="">
                        <div class="ivu-select-selection ivu-select-selection-mini">
                            <input id="valueChange" type="text" placeholder="中恒数字" class="ivu-select-placeholder"
                                style="display: none;">
                            <span class="ivu-select-placeholder ivu-select-selected-value undefined">中恒数字

                            </span>

                            <i class="ivu-select-arrow ivu-input-icon ivu-icon ivu-icon-ios-arrow-down"
                                style="color: rgb(255, 255, 255);">
                            </i>
                        </div>
                    </div>
                    <div class="ivu-select-dropdown select-dropdown" style="padding-left: 10px; display: none ">
                        <div class="map_project_tree">
                            <ul class="map_project_tree_ul">
                                <li title="中恒数字"><span class="tree_arrow_span"><i
                                            class="ivu-icon ivu-icon-md-arrow-dropdown"
                                            style="font-size: 14px; transform: rotate(-90deg); "></i></span>
                                    <span class="treeName selected" style="width: 140px;">中恒数字</span> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="refersh" style=""><img
                src=""
                alt="" class=""></div>

        <div style="position: absolute; z-index: 20; bottom: 50px; right: 60px;">

        </div>

        <div class="searchBox default_searchBox">
            <div class="search-content" style="padding-top: 40px;">
                <div class="ivu-spin ivu-spin-large ivu-spin-fix ivu-spin-show-text" style="display: none;">
                    <div class="ivu-spin-main"><span class="ivu-spin-dot"></span>
                        <div class="ivu-spin-text"><i class="demo-spin-icon-load ivu-icon ivu-icon-ios-loading"
                                style="font-size: 18px;"></i>
                            <div>Loading</div>
                        </div>
                    </div>
                </div>
                <div class="bageMap-tabs">
                    <ul class="packUp"
                        style="padding-right: 0px; height: 40px; border-bottom: 1px solid rgba(90, 183, 242, 0.39);">
                        <li class="select-show-type">人员</li>

                    </ul>
                    <div class="map-userComponent">
                        <div class="selectBox">
                            <select size="mini" placeholder="班组" @change="handleChange1($event)" v-model="group">
                                <option value="">全部</option>
                                <option label="钢筋工班组" value="钢筋工班组">钢筋工班组</option>
                                <option label="木工班组" value="木工班组">木工班组</option>
                                <option label="混凝土工班组" value="混凝土工班组">混凝土工班组</option>
                            </select>
                            <select size="mini" placeholder="工种" @change="handleChange1($event)" v-model="work">
                                <option value="">全部</option>
                                <option label="车工" value="车工">车工</option>
                                <option label="焊工" value="焊工">焊工</option>
                                <option label="监工" value="监工">监工</option>
                                <option label="其他" value="其他">其他</option>
                                <option label="小工" value="小工">小工</option>
                                <option label="普工" value="普工">普工</option>
                                <option label="技工" value="技工">技工</option>
                                <option label="质量员" value="质量员">质量员</option>
                                <option label="试验员" value="试验员">试验员</option>l
                                <option label="安全员" value="安全员">安全员</option>
                                <option label="施工员" value="施工员">施工员</option>
                                <option label="机电员" value="机电员">机电员</option>
                                <option label="搬运工" value="搬运工">搬运工</option>
                                <option label="测量员" value="测量员">测量员</option>
                                <option label="技术员" value="技术员">技术员</option>
                                <option label="材料员" value="材料员">材料员</option>
                                <option label="资料员" value="资料员">资料员</option>
                                <option label="预算员" value="预算员">预算员</option>
                                <option label="综合行政" value="综合行政">综合行政</option>
                                <option label="项目经理" value="项目经理">项目经理</option>
                                <option label="特殊作业" value="特殊作业">特殊作业</option>
                                <option label="同进同出" value="同进同出">同进同出</option>
                                <option label="项目总工" value="项目总工">项目总工</option>
                                <option label="施工负责人" value="施工负责人">施工负责人</option>
                                <option label="项目副书记" value="项目副书记">项目副书记</option>
                                <option label="项目商务经理" value="项目商务经理">项目商务经理</option>
                                <option label="项目生产经理" value="项目生产经理">项目生产经理</option>
                                <option label="项目安全总监" value="项目安全总监">项目安全总监</option>
                                <option label="项目经理助理" value="项目经理助理">项目经理助理</option>
                                <option label="项目执行经理" value="项目执行经理">项目执行经理</option>
                                <option label="施工技术商务" value="施工技术商务">施工技术商务</option>
                                <option label="项目质量总工兼副总工程师" value="项目质量总工兼副总工程师">项目质量总工兼副总工程师</option>
                                <option label="材料组长" value="材料组长">材料组长</option>
                                <option label="机电组长" value="机电组长">机电组长</option>
                                <option label="安装经理" value="安装经理">安装经理</option>
                                <option label="技术总工" value="技术总工">技术总工</option>
                                <option label="电工" value="电工">电工</option>
                                <option label="木工" value="木工">木工</option>
                                <option label="泥工" value="泥工">泥工</option>
                                <option label="砼工" value="砼工">砼工</option>
                                <option label="钢筋工" value="钢筋工">钢筋工</option>
                                <option label="架子工" value="架子工">架子工</option>
                                <option label="抹灰工" value="抹灰工">抹灰工</option>
                                <option label="油漆工" value="油漆工">油漆工</option>
                                <option label="水电工" value="水电工">水电工</option>
                                <option label="杂工" value="杂工">杂工</option>
                                <option label="钢结构安装工" value="钢结构安装工">钢结构安装工</option>
                                <option label="塔吊操作员" value="塔吊操作员">塔吊操作员</option>
                                <option label="保安" value="保安">保安</option>
                                <option label="现场负责人" value="现场负责人">现场负责人</option>
                                <option label="钢筋班组长" value="钢筋班组长">钢筋班组长</option>
                                <option label="现场管理" value="现场管理">现场管理</option>
                                <option label="电工工长" value="电工工长">电工工长</option>
                                <option label="电焊工" value="电焊工">电焊工</option>
                                <option label="钻机工" value="钻机工">钻机工</option>
                                <option label="吊车司机" value="吊车司机">吊车司机</option>
                                <option label="挖机司机" value="挖机司机">挖机司机</option>
                                <option label="演示人员" value="演示人员">演示人员</option>
                                <option label="项目管理人员" value="项目管理人员">项目管理人员</option>
                                <option label="装载机司机" value="装载机司机">装载机司机</option>
                                <option label="推土机司机" value="推土机司机">推土机司机</option>
                                <option label="压路机司机" value="压路机司机">压路机司机</option>
                                <option label="自卸车司机" value="自卸车司机">自卸车司机</option>
                                <option label="水泥罐车司机" value="水泥罐车司机">水泥罐车司机</option>
                                <option label="天泵操作员" value="天泵操作员">天泵操作员</option>
                                <option label="地泵操作员" value="地泵操作员">地泵操作员</option>
                                <option label="双头车驾驶员" value="双头车驾驶员">双头车驾驶员</option>
                                <option label="挂车驾驶员" value="挂车驾驶员">挂车驾驶员</option>
                                <option label="砂浆车驾驶员" value="砂浆车驾驶员">砂浆车驾驶员</option>
                                <option label="叉车驾驶员" value="叉车驾驶员">叉车驾驶员</option>
                                <option label="掘进工" value="掘进工">掘进工</option>
                                <option label="掘进班长" value="掘进班长">掘进班长</option>
                                <option label="掘进队长" value="掘进队长">掘进队长</option>
                                <option label="机修工" value="机修工">机修工</option>
                                <option label="机修班长" value="机修班长">机修班长</option>
                                <option label="车队队长" value="车队队长">车队队长</option>
                                <option label="车队班长" value="车队班长">车队班长</option>
                                <option label="罐车驾驶员" value="罐车驾驶员">罐车驾驶员</option>
                            </select>
                            <select size="mini" placeholder="状态" @change="handleChange1($event)" v-model="state">
                                <option value="">全部</option>
                                <option value="场内">场内</option>
                                <option value="场外">场外</option>
                            </select>
                        </div>
                        <div class="listTitle" style="font-size: 12px; display: flex;">
                            <input class="custom-control-input" type="checkbox" id="checkbox" v-model="checked"
                                @change="changeAllChecked()">
                            <span class="index">序号</span>
                            <span class="employeeName">姓名</span>
                            <span class="team">所属班组</span>
                            <span class="gender">工种</span></div>
                        <div class="userlist" style="height: 670%;">
                            <div class="listTitle" v-for="(i,index) in emplist"
                                style="font-size: 5px; text-align: center; display: flex; margin-top: 8px;">
                                <!-- checkedbox -->
                                <input class="custom-control-input" type="checkbox" v-model="i.value" :id="index+1">
                                <div v-on:click="showroute(i.deviceImei)" style="display: flex; ">
                                    <span class="index">{{index+1}}</span>
                                    <span class="employeeName">{{i.name}}</span>
                                    <span class="team">{{i.teamname}}</span>
                                    <span class="gender">{{i.workname}}</span>
                                </div>

                            </div>

                        </div>


                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-center export-pagination">

                            </ul>
                        </nav>
                    </div>
                    <button type="button" class="showAllButton ivu-btn ivu-btn-default ivu-btn-small"
                        v-on:click="showposition" style="position: absolute; right: 100px;">
                        <span>定位</span>

                        <button type="button" class="showAllButton ivu-btn ivu-btn-default ivu-btn-small"
                            style="position: absolute; right: 15px;">
                            <span>完整轨迹</span>
                        </button>

                    </button>
                    <div class="voicebox">
                        <div class="send-voice-components">
                            <hr>
                            <p class="voiceType"><span>语音类型：</span>
                                <select placeholder="请选择语音内容" style="width: 60%;" v-model="voicevalue">
                                    <option label="防空报警" value="1">防空报警</option>
                                    <option label="请带好安全帽" value="2">请带好安全帽</option>
                                    <option label="危险请注意" value="3">危险请注意</option>
                                    <option label="已收到报警，请等待救援" value="7">已收到报警，请等待救援</option>
                                    <option label="附近有人需要救援" value="8">附近有人需要救援</option>
                                    <option label="请不要违规作业" value="9">请不要违规作业</option>
                                    <option label="请回到岗位" value="10">请回到岗位</option>
                                    <option label="请到办公室" value="11">请到办公室</option>
                                    <option label="请充电" value="12">请充电</option>
                                    <option label="请联系管理人员" value="13">请联系管理人员</option>
                                    <option label="你是否需要帮助" value="14">你是否需要帮助</option>
                                    <option label="请立即撤离" value="15">请立即撤离</option>
                                    <option label="请回电" value="16">请回电</option>
                                </select></p>
                            <div class="buttons"><button type="button" class="ivu-btn ivu-btn-default" v-on="sendVoice">
                                    <span>发送语音</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="showMore" style="display: none;"><span>更多</span> <i
                            class="type-more-icon ivu-icon ivu-icon-ios-arrow-down"></i></div>
                </div>
                <div class="map-goLsit" style="display: none;">
                    <p><i class="ivu-icon ivu-icon-ios-undo"></i>
                        返回对的搜索数据
                    </p>
                </div>
                <div class="dataList">
                    <div>
                        <!---->

                        <div class="userInfoBox infoMediaHeight">
                            <div class="userInfoContent border-radius">
                                <div class="SOSInfoContent border-radius">
                                    <div class="title-1" style="display: none;">
                                        <p class="info-1"><span>设备告警</span></p>
                                        <p class="time"><span>救援时长：</span> <span id="sosTimeBox" class="timeBox"></span>
                                        </p>
                                    </div>
                                    <div class="title-1" style="display: none;">
                                        <p class="info-1"><span>设备告警</span></p>
                                        <p class="conversely"><button type="button" class="ivu-btn ivu-btn-warning">
                                                <!---->
                                                <!----> <span>解除告警</span></button></p>
                                    </div>
                                    <p class="statusList" style="display: none;"></p>
                                    <!---->
                                </div>
                                <div class="bottomButton" style="display: none;">
                                    <p class="noticeOther">通知其他人员</p>
                                    <p class="situation">解除告警</p>
                                </div>
                                <p class="title" style="display: none;">个人信息</p>
                                <div class="infoBox" style="display: none;">
                                    <p style="display: none; flex-wrap: wrap;"><span class="name">张军</span>
                                        <span>男</span> <span>40岁</span> <span>安全员</span></p>
                                    <p>
                                        设备号：
                                        <span>359972069832035</span></p>
                                    <p>
                                        身份证号：
                                        <span>420107198009283333</span></p>
                                    <p>
                                        联系电话：
                                        <span>18858337711</span></p>
                                    <p>
                                        班组：
                                        <span>钢筋工班组</span></p>
                                    <p>
                                        班组长：
                                        <span>孟凡鹏</span></p>
                                    <p>
                                        紧急联系人电话：
                                        <span>18610938981</span></p>
                                </div>
                            </div>


                            <nav class="map-playBack border-radius"
                                style="position: absolute; top: 0px; z-index: 100; height: 30px;right: -100px;">
                                <div class="form-group col-md-6" style="left:5px;position: absolute;top: 8px;">
                                    <label for="dob"
                                        style="line-height: 2; color: white;">日期选择&nbsp;&nbsp;&nbsp;</label>
                                    <input type="date" placeholder="Date of Birth" class="form-control" id="dob"
                                        style="position: absolute; top: 0px;" v-model="dateOfChoice">
                                </div>
                                <!-- <div class="speed">
                                    <div title="减速" class="reduce"></div>
                                    <div size="mini" title="暂停" class="startlocus" style="display: none;"></div>
                                    <div size="mini" title="回放" class="stoplocus"></div>
                                    <div size="mini" title="加速" class="add"></div>
                                </div>
                                <div style="text-align: center; color: rgb(255, 255, 255); opacity: 0;">当前倍速：10</div> -->
                            </nav>
                        </div>
                        <!---->
                        <!---->
                    </div>
                    <div>
                        <!---->
                        <!---->
                        <!---->
                        <!---->
                    </div>
                    <div>
                        <!---->
                        <!---->
                    </div>
                    <div>
                        <!---->
                        <!---->
                    </div>
                    <div>
                        <!---->
                        <!---->
                    </div>
                    <div>
                        <!---->
                        <!---->
                    </div>
                    <div>
                        <!---->
                        <!---->
                    </div>
                    <!---->
                    <!---->
                </div>
            </div>
        </div>

        <!-- <iframe
            id="blockbyte-bs-sidebar" class="notranslate" aria-hidden="true" data-pos="left"></iframe> -->
        <div id="blockbyte-bs-indicator" class="blockbyte-bs-fullHeight" style="width: 1px; height: 100%; top: 0%;">
        </div>
        <div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
            <div class="xl-chrome-ext-bar__logo"></div>

            <a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
            <a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
        </div>


    </div>



    <script>
        var app = new Vue({
            el: '#electronicSandTable',
            data: {
                ApiUrl: 'http://192.168.0.45:1000',
                // 三个筛选框绑定数据
                group: '',
                work: '',
                state: '',
                // 从后端接收到的员工列表数据
                emplist: [],
                yuanEmplist: [],
                map: {},    // 地图
                deviceImei: '', // 设备号
                index: '',  // 人员索引
                dateOfChoice: '', // 选择日期事件
                voicevalue: '', // 语音类型对应的值
                lineArr: [],   // 轨迹
                polyline: {},
                responseData: {},
                marker: {},
                markers: [],
                oldmarkerList: [
                    {
                        name: '刘阳',
                        lon: 120.63520638241431,
                        lat: 31.435001399727474,
                        team: '钢筋工班组'
                    },
                    {
                        name: '谷ty',
                        lon: 120.65520638241431,
                        lat: 31.445001399727474,
                        team: '混凝土工班组'
                    },
                    {
                        name: '阿炳',
                        lon: 120.64520638241431,
                        lat: 31.455001399727474,
                        team: '机组队码头'
                    },
                    {
                        name: '孟凡',
                        lon: 120.63520638241431,
                        lat: 31.485001399727474,
                        team: '钢筋共班组'
                    }
                ],
                markerList: [],
                // 轨迹颜色
                color: [
                    "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
                    "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
                    "#651067", "#329262", "#5574a6", "#3b3eac"
                ],
                passedPolyline: {},
                checked: false,
            },
            mounted() {
                this.initMap();
                this.getdata();
            },
            methods: {
                getdata: function () {
                    var that = this;

                    // $.ajax({
                    //     url: 'http://127.0.0.1:5001/api/test',
                    //     type: 'GET',
                    //     dataType: 'json',
                    //     data: {},
                    //     success: function (data) {
                    //         console.log(data);

                    //         for (var i = 0; i < data.length - 1; i++) {

                    //             that.emplist.push(data[i]);
                    //         }

                    //     },
                    //     error: function () {
                    //     }
                    // });

                    // 模拟数据 将数据变为vue实例中的全局变量
                    this.yuanEmplist = [
                        {

                            name: '刘阳',
                            teamname: '钢筋工班组',
                            workname: '车工',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752290'
                        },
                        {
                            name: '加号',
                            teamname: '木工班组',
                            workname: '焊工',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752291'
                        },
                        {

                            name: '晨晨',
                            teamname: '钢筋工班组',
                            workname: '监工',
                            statename: '场内',
                            value: false,
                            deviceImei: '359972069752292'
                        },
                        {

                            name: '林冲',
                            teamname: '混凝土工班组',
                            workname: '其他',
                            statename: '场内',
                            value: false,
                            deviceImei: '359972069752293'
                        },
                        {

                            name: '徐鹤',
                            teamname: '钢筋工班组',
                            workname: '小工',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752294'
                        },
                        {

                            name: '徐乐',
                            teamname: '木工班组',
                            workname: '技工',
                            statename: '场内',
                            value: false,
                            deviceImei: '359972069752295'
                        },
                        {

                            name: '张进',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752296'
                        },
                        {

                            name: '张久',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752297'
                        },
                        {

                            name: '李伟',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752298'
                        },
                        {

                            name: '张军',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752299'
                        },
                        {

                            name: '刘伟',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752200'
                        },
                        {

                            name: '梦珂',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752201'
                        },
                        {

                            name: '李康',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752202'
                        },
                        {

                            name: '周周',
                            teamname: '混凝土工班组',
                            workname: '质量员',
                            statename: '场外',
                            value: false,
                            deviceImei: '359972069752203'
                        }
                    ]

                    // 1.将全局变量的值放入当前方法中
                    that.emplist = this.yuanEmplist;
                },
                // 2.对拿到的新值进行处理
                handleChange1: function (e) {
                    this.emplist = [];
                    let _this = this;
                    this.yuanEmplist.forEach((item, index) => {
                        if (_this.group == '' || _this.group == item.teamname) {
                            if (_this.work == '' || _this.work == item.workname) {
                                if (_this.state == '' || _this.state == item.statename) {
                                    _this.emplist.push(item)
                                }

                            }
                        }
                    });
                },





                // console.log(e.target.value);
                // selectedTeamName = e.target.value;
                // this.emplist = [];


                // var selectedemplist = [
                //     {
                //         name: '刘阳',
                //         teamname: '钢筋工班组',
                //         workname: '车工',
                //         statename: '场外'
                //     },
                //     {
                //         name: '吴',
                //         teamname: '木工班组',
                //         workname: '焊工',
                //         statename: '场外'
                //     },
                //     {
                //         name: '刘阳2',
                //         teamname: '钢筋工班组',
                //         workname: '监工',
                //         statename: '场内'
                //     },
                //     {
                //         name: '刘阳3',
                //         teamname: '混凝土工班组',
                //         workname: '其他',
                //         statename: '场内'
                //     },
                //     {
                //         name: '刘阳4',
                //         teamname: '钢筋工班组',
                //         workname: '小工',
                //         statename: '场外'
                //     },
                //     {
                //         name: '刘阳5',
                //         teamname: '木工班组',
                //         workname: '技工',
                //         statename: '场内'
                //     },
                //     {
                //         name: '刘阳6',
                //         teamname: '混凝土工班组',
                //         workname: '质量员',
                //         statename: '场外'
                //     },
                // ];
                // if (selectedTeamName == '') {
                //     this.emplist = selectedemplist;
                // }
                // else {
                //     for (let i = 0; i < selectedemplist.length - 1; i++) {
                //         const element = selectedemplist[i];


                //         if (selectedTeamName == element.teamname) {
                //             this.emplist.push(element);

                //             console.log(this.emplist);
                //         }


                //     }
                // }


                // 工种
                // handleChange2: function (e) {
                //     console.log(e.target.value);
                //     selectedTeamName = e.target.value;
                //     selected
                //     this.emplist = [];


                //     var selectedemplist = [
                //         {
                //             name: '刘阳',
                //             teamname: '钢筋工班组',
                //             workname: '车工',
                //             statename: '场外'
                //         },
                //         {
                //             name: '吴',
                //             teamname: '木工班组',
                //             workname: '焊工',
                //             statename: '场外'
                //         },
                //         {
                //             name: '刘阳2',
                //             teamname: '钢筋工班组',
                //             workname: '监工',
                //             statename: '场内'
                //         },
                //         {
                //             name: '刘阳3',
                //             teamname: '混凝土工班组',
                //             workname: '其他',
                //             statename: '场内'
                //         },
                //         {
                //             name: '刘阳4',
                //             teamname: '钢筋工班组',
                //             workname: '小工',
                //             statename: '场外'
                //         },
                //         {
                //             name: '刘阳5',
                //             teamname: '木工班组',
                //             workname: '技工',
                //             statename: '场内'
                //         },
                //         {
                //             name: '刘阳6',
                //             teamname: '混凝土工班组',
                //             workname: '质量员',
                //             statename: '场外'
                //         },
                //     ];
                //     if (this.group == '' || this.work == '') {
                //         console.log(this.group);
                //         this.emplist = selectedemplist;
                //     }
                //     else if (this.group != '' || this.work == '') {

                //     }


                //     else {
                //         for (let i = 0; i < selectedemplist.length - 1; i++) {
                //             const element = selectedemplist[i];


                //             if (selectedTeamName == element.teamname) {
                //                 this.emplist.push(element);

                //                 console.log(this.emplist);
                //             }


                //         }
                //     }


                // },

                // getSelectData: function () {
                //     $.ajax({
                //         url: 'http://192.168.0.45:1000/zb/project/emergency',
                //         type: 'GET',
                //         dataType: 'json',
                //         data: {},
                //         success: function (data) {
                //             console.log(data);
                //             for (var i = 0; i < data.length - 1; i++) {

                //                 that.data1.push(data[i]);
                //             }

                //         },
                //         error: function () {
                //         }
                //     });
                // },
                // 全选和取消全选的方法
                changeAllChecked: function () {
                    var emplist = this.yuanEmplist
                    if (this.checked) {
                        emplist.forEach((item, index) => {
                            item.value = true;
                        });
                    } else {
                        emplist.forEach((item, index) => {
                            item.value = false;
                        });
                    }
                },
                initMap() {
                    // 实例化地图,并设置中心点


                    var map = new AMap.Map("container", {
                        resizeEnable: true,
                        center: [120.63520638241431, 31.425001399727474],
                        zoom: 14
                    })
                    this.map = map




                    //轨迹回放功能
                    // 坐标点集合
                    // var lineArr = [
                    //     [120.63520638241431, 31.425001399727474],
                    //     [120.63520638241431, 31.445001399727474],
                    //     [120.63520638241431, 31.455001399727474],
                    //     [120.63520638241431, 31.465001399727474],
                    //     [120.63520638241431, 31.475001399727474],
                    //     [120.83520638241431, 31.485001399727474],
                    //     [120.63520638241431, 31.495001399727474],
                    //     [120.63520638241431, 31.505001399727474],
                    //     [120.63520638241431, 31.515001399727474],
                    //     [120.63520638241431, 31.525001399727474],
                    //     [120.63520638241431, 31.535001399727474],
                    //     [120.63520638241431, 31.545001399727474],
                    // ]
                    // this.lineArr = lineArr;




                    // 实例化点标记
                    // var marker = new AMap.Marker({
                    //     icon: './static/images/map/markers/positionIcon.png',
                    //     position: [120.63520638241431, 31.425001399727474],
                    //     offset: new AMap.Pixel(0, 0)
                    // });
                    // this.marker = marker;
                    // marker.setMap(map);

                    // 设置文本
                    // var content = this.content;
                    // marker.setLabel({
                    //     offset: new AMap.Pixel(-20, -40),  //设置文本标注偏移量
                    //     content: '<div><div id="employeeInfowindow" ><div class="employeeInfowindowBox" style="display:flex; align-items: center;"><img src="./项目地图_files/employee_head_man.png " style="height: 40px; width:40px"><div style="padding-right:0"><div class="top"><span class="name" title="张军">张军</span><span>00:00:00</span></div><div class="bottom"><span class="teamName">钢筋工班组</span><span style="color:#f00;margin-right:10px"></span></div><div style="display:none" class="batteryClass "></div></div></div></div></div>',
                    //     direction: 'right' //设置文本标注方位
                    // });



                    // var markerList = [
                    //     {
                    //         name: '刘阳',
                    //         lon: 120.63520638241431,
                    //         lat: 31.435001399727474,
                    //         team: '钢筋工班组'
                    //     },
                    //     {
                    //         name: '谷ty',
                    //         lon: 120.65520638241431,
                    //         lat: 31.445001399727474,
                    //         team: '混凝土工班组'
                    //     },
                    //     {
                    //         name: '阿炳',
                    //         lon: 120.64520638241431,
                    //         lat: 31.455001399727474,
                    //         team: '机组队码头'
                    //     },
                    //     {
                    //         name: '孟凡',
                    //         lon: 120.63520638241431,
                    //         lat: 31.485001399727474,
                    //         team: '钢筋共班组'
                    //     }
                    // ]



                    // 多个员工定位demo
                    // markerList.forEach(element => {
                    //     marker = new AMap.Marker({
                    //         icon: './static/images/map/markers/positionIcon.png',
                    //         position: [element.lon, element.lat],
                    //         offset: new AMap.Pixel(0, 0)
                    //     });
                    //     marker.setMap(map);
                    //     marker.setLabel({
                    //     offset: new AMap.Pixel(-20, -40),  //设置文本标注偏移量
                    //     content: '<div><div id="employeeInfowindow" ><div class="employeeInfowindowBox" style="display:flex; align-items: center;"><img src="./项目地图_files/employee_head_man.png " style="height: 40px; width:40px"><div style="padding-right:0"><div class="top"><span class="name" title="'+ element.name + '">' + element.name + '</span><span>00:00:00</span></div><div class="bottom"><span class="teamName">' + element.team + '</span><span style="color:#f00;margin-right:10px"></span></div><div style="display:none" class="batteryClass "></div></div></div></div></div>',
                    //     direction: 'right' //设置文本标注方位
                    // });
                    // });

                    // 多个员工定位
                    // markerList.forEach(element => {
                    //     marker = new AMap.Marker({
                    //         icon: './static/images/map/markers/positionIcon.png',
                    //         position: [element.lon, element.lat],
                    //         offset: new AMap.Pixel(0, 0)
                    //     });
                    //     marker.setMap(map);
                    //     marker.setLabel({
                    //         offset: new AMap.Pixel(-20, -40),  //设置文本标注偏移量
                    //         content: '<div><div id="employeeInfowindow" ><div class="employeeInfowindowBox" style="display:flex; align-items: center;"><img src="./项目地图_files/employee_head_man.png " style="height: 40px; width:40px"><div style="padding-right:0"><div class="top"><span class="name" title="' + element.name + '">' + element.name + '</span><span>00:00:00</span></div><div class="bottom"><span class="teamName">' + element.team + '</span><span style="color:#f00;margin-right:10px"></span></div><div style="display:none" class="batteryClass "></div></div></div></div></div>',
                    //         direction: 'right' //设置文本标注方位   
                    //     });

                    // });

                    // marker = new AMap.Marker({
                    //     map: map,
                    //     position: [120.63520638241431, 31.435001399727474],
                    //     icon: "./images/employee_head_man.png",
                    //     offset: new AMap.Pixel(0, 0),
                    //     autoRotation: true,
                    //     // angle: -90,
                    // });




                },
                // 定位
                showposition: function () {

                    var marker = this.marker;
                    var markerList = this.oldmarkerList;
                    this.map.clearMap();
                    markerList.forEach((item, index) => {
                        // 实例化点标记
                        marker = new AMap.Marker({
                            icon: './static/images/map/markers/positionIcon.png',
                            position: [item.lon, item.lat],
                            offset: new AMap.Pixel(0, 0)
                        });
                        marker.setLabel({
                            offset: new AMap.Pixel(-20, -40),  //设置文本标注偏移量
                            content: '<div><div id="employeeInfowindow" ><div class="employeeInfowindowBox" style="display:flex; align-items: center;"><img src="./static/images/employee_head_man.png " style="height: 40px; width:40px"><div style="padding-right:0"><div class="top"><span class="name" title="' + item.name + '">' + item.name + '</span><span>00:00:00</span></div><div class="bottom"><span class="teamName">' + item.team + '</span><span style="color:#f00;margin-right:10px"></span></div><div style="display:none" class="batteryClass "></div></div></div></div></div>',
                            direction: 'right' //设置文本标注方位   
                        });

                        marker.setMap(this.map);

                        this.markers.push(marker)

                    });
                    this.map.setFitView();

                },
                // 点击显示轨迹
                showroute(deviceImei) {
                    this.map.clearMap();

                    var that = this;
                    var responseData;

                    if (this.dateOfChoice) {
                        dateOfChoice = this.dateOfChoice;
                        // 轨迹数据
                        $.ajax({
                            url: this.ApiUrl + '/testdata/testdata/',
                            type: 'post',
                            data: {
                                // 设备号
                                "deviceImei": deviceImei,
                                // 日期
                                "dateOfChoice": dateOfChoice
                            },
                            dataType: 'json',
                            success: function (data, status) {
                                if (status == "success") {


                                    var resdata = JSON.parse(JSON.stringify(data))
                                    console.log(resdata);
                                    that.responseData = resdata;
                                    console.log(that.responseData);

                                    if (that.markers != []) {
                                        that.map.remove(that.markers);
                                    } else {
                                        console.log(that.markers);
                                    }

                                    // 点击之后 将设备号和日期post传给后端
                                    //获得对应人员的经纬度 
                                    var person = {
                                        // timestamp: '2020/9/12'
                                        name: '刘阳',
                                        // 当前gps定位的经纬度
                                        lon: 120.63520638241431,
                                        lat: 31.425001399727474,
                                        team: '钢筋工班组',
                                        // 轨迹的经纬度集合
                                        lineArr: [
                                            [120.63520638241431, 31.425001399727474],
                                            [120.63520638241431, 31.445001399727474],
                                            [120.63520638241431, 31.455001399727474],
                                            [120.63520638241431, 31.465001399727474],
                                            [120.63520638241431, 31.475001399727474],
                                            [120.83520638241431, 31.485001399727474],
                                            [120.63520638241431, 31.495001399727474],
                                            [120.63520638241431, 31.505001399727474],
                                            [120.63520638241431, 31.515001399727474],
                                            [120.63520638241431, 31.525001399727474],
                                            [120.63520638241431, 31.535001399727474],
                                            [120.63520638241431, 31.545001399727474],
                                        ],
                                        deviceImei: "359972069752290"
                                    };

                                    // console.log(_this.yuanEmplist[deviceImei]);


                                    // this.selecteditem = emplist.deviceImei
                                    // console.log(this.selecteditem)


                                    var responseData = that.responseData
                                    console.log(responseData);
                                    // 实例化人员标记
                                    var marker = new AMap.Marker({
                                        icon: './static/images/map/markers/positionIcon.png',
                                        position: [responseData.lon, responseData.lat],
                                        offset: new AMap.Pixel(0, 0)
                                    });
                                    // 创建一个 Icon
                                    var startIcon = new AMap.Icon({
                                        // 图标尺寸
                                        size: new AMap.Size(30, 30),
                                        // 图标的取图地址
                                        image: './static/images/map/markers/startpoint.png',
                                        // 图标所用图片大小
                                        imageSize: new AMap.Size(30, 30),
                                        // 图标取图偏移量
                                        imageOffset: new AMap.Pixel(0, 0)
                                    });

                                    // 将 icon 传入 marker
                                    // var startMarker = new AMap.Marker({
                                    //     position: new AMap.LngLat(116.35, 39.89),
                                    //     icon: startIcon,
                                    //     offset: new AMap.Pixel(0, 0)
                                    // });

                                    // 创建一个 icon
                                    var endIcon = new AMap.Icon({
                                        size: new AMap.Size(30, 30),
                                        image: './static/images/map/markers/endpoint.png',
                                        imageSize: new AMap.Size(30, 30),
                                        imageOffset: new AMap.Pixel(0, 0)
                                    });
                                    // 将 icon 传入 marker
                                    // var endMarker = new AMap.Marker({
                                    //     position: new AMap.LngLat(116.45, 39.93),
                                    //     icon: endIcon,
                                    //     offset: new AMap.Pixel(-13, -30)
                                    // });

                                    var startMarker = new AMap.Marker({
                                        icon: startIcon,
                                        position: (responseData.lineArr)[0],
                                        offset: new AMap.Pixel(0, 0)
                                    });

                                    var endMarker = new AMap.Marker({
                                        icon: endIcon,
                                        position: (responseData.lineArr)[responseData.lineArr.length - 1],
                                        offset: new AMap.Pixel(0, 0)
                                    });


                                    that.marker = marker
                                    that.marker.setLabel({
                                        offset: new AMap.Pixel(-20, -40),  //设置文本标注偏移量
                                        content: '<div><div id="employeeInfowindow" ><div class="employeeInfowindowBox" style="display:flex; align-items: center;"><img src="./static/images/employee_head_man.png " style="height: 40px; width:40px"><div style="padding-right:0"><div class="top"><span class="name" title="' + responseData.name + '">' + responseData.name + '</span><span>00:00:00</span></div><div class="bottom"><span class="teamName">' + responseData.team + '</span><span style="color:#f00;margin-right:10px"></span></div><div style="display:none" class="batteryClass "></div></div></div></div></div>',
                                        direction: 'right' //设置文本标注方位   
                                    });

                                    marker.setMap(that.map);
                                    startMarker.setMap(that.map);
                                    endMarker.setMap(that.map);
                                    that.markers.push(marker)
                                    that.markers.push(startMarker)
                                    that.markers.push(endMarker)
                                    //轨迹回放功能
                                    // 坐标点集合



                                    var polyline = new AMap.Polyline({
                                        path: responseData.lineArr,
                                        isOutline: true,
                                        outlineColor: 'black',
                                        borderWeight: 3,
                                        strokeColor: "#3366FF",
                                        strokeOpacity: 1,
                                        strokeWeight: 6,
                                        // 折线样式还支持 'dashed'
                                        strokeStyle: "solid",
                                        // strokeStyle是dashed时有效
                                        strokeDasharray: [10, 5],
                                        lineJoin: 'round',
                                        lineCap: 'round',
                                        zIndex: 50,
                                    })
                                    var passedPolyline = new AMap.Polyline({
                                        map: that.map,
                                        // path: lineArr,
                                        strokeColor: responseData.linecolor,  //线颜色
                                        // strokeOpacity: 1,     //线透明度
                                        strokeWeight: 6,      //线宽
                                        // strokeStyle: "solid"  //线样式
                                    });
                                    that.marker.on('moving', function (e) {
                                        passedPolyline.setPath(e.passedPath);
                                    });
                                    that.marker.moveAlong(responseData.lineArr, 500);

                                    polyline.setMap(that.map)
                                    that.map.setFitView([polyline])
                                }
                            },
                            error: function (e) {
                                alert("error");
                            }
                        })
                    }
                    else {
                        alert('请选择时间');
                    }
                },
                //发送语音

                // sendVoice: function () {
                //     $.ajax({
                //         url: this.ApiUrl +'',
                //         type: 'post',
                //         dataType: 'json',
                //         data: {
                //             'voicevalue': voicevalue,
                //             'deviceImei': this.deviceImei
                //         },
                //         success: function (data, status) {
                //             alert('成功');
                //             console.log(data);
                //         },
                //         error: function (status) {
                //             alert('失败');
                //         }
                //     })
                // },
                sendVoice: function () {
                    var data = [];
                    debugger
                    var _this = this
                    _this.emplist.forEach(element => {
                        if (element.value == true) {
                            data.push(element.deviceImei)
                            console.log(data);

                        } else {

                        }
                    });
                    alert('发送成功');
                }
            },
        })

    </script>
</body>

</html>